<template>
    <div id="main" style="width: 100%;height:100%;"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref, reactive } from 'vue'
import { get } from '../../request/methods'

let equipmentArr = reactive<any>({ list: [] })


let option = ref({
    legend: {
        top: '20%',
        right: '0',
        orient: 'vertical',
        textStyle: {
            color: '#fff'
        }
    },
    toolbox: {
        show: true,
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    series: [
        {
            // name: 'Nightingale Chart',
            type: 'pie',
            radius: '100%',
            center: ['50%', '60%'],
            label: {
                show: false
            },
            roseType: 'area',
            itemStyle: {
                borderRadius: 8
            },
            data: [
                {
                    value: 26,
                    name: '监控类'
                }, {
                    value: 33,
                    name: '消防类'
                }, {
                    value: 88,
                    name: '其他类'
                }
            ]
        }
    ]
});
// get({
//     url: '/v1.0/api/deviceWorking/equipment'
// }).then(res => {
//     res.data.data.forEach((v: any, i: any) => {
//         equipmentArr.list.push(v)
//     })

// })
// option.series[0].data = equipmentArr.value

onMounted(() => {

    // console.log(equipmentArr.list);
    // option.value.series[0].data = equipmentArr.list

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);

    option && myChart.setOption(option.value);

    window.addEventListener('resize', () => {
        setTimeout(() => {
            myChart?.resize({
                animation: {
                    duration: 300,
                },
            });
        }, 300);
    });
})


</script>

<style scoped></style>